<template>
  <div class="draggle">
    <draggable :list="headerList" class="dragg-type">
      <ul class="ul-container" v-for="item in headerList" :key="item._id">
        <draggable :list="item.headers" class="dragg-header" :group="group">
          <li v-for="prop in item.headers" :key="prop._id" class="li-container">
            {{ prop.url_name }}
          </li>
        </draggable>
      </ul>
    </draggable>
  </div>
</template>

<script>
import draggable from "vuedraggable";
export default {
  components: { draggable },
  data() {
    return {
      headerList: [
        {
          _id: "6195c21bcb7314dccdfb4dbb",
          type_name: "学习",
          type_order: "",
          user_id: "6193160d0a24a8698f655630",
          createTime: "2021-11-18T02:55:19.503Z",
          __v: 0,
          headers: [
            {
              _id: "6195c2f5cb7314dccdfb4dc9",
              url_name: "掘金",
              url_address: " https://juejin.cn/",
              url_icon: " https://juejin.cn//favicon.ico",
              url_order: 0,
              url_status: true,
              type_id: "6195c21bcb7314dccdfb4dbb",
              user_id: "6193160d0a24a8698f655630",
              createTime: "2021-11-18T02:55:19.495Z",
              __v: 0,
            },
            {
              _id: "6195c4e0cb7314dccdfb4e16",
              url_name: "百度",
              url_address: "https://www.baidu.com/",
              url_icon: "https://www.baidu.com//favicon.ico",
              url_order: 0,
              url_status: true,
              type_id: "6195c21bcb7314dccdfb4dbb",
              user_id: "6193160d0a24a8698f655630",
              createTime: "2021-11-18T02:55:19.495Z",
              __v: 0,
            },
            {
              _id: "6195c4f6cb7314dccdfb4e19",
              url_name: "CSDN",
              url_address: "https://www.csdn.net/",
              url_icon: "https://www.csdn.net//favicon.ico",
              url_order: 0,
              url_status: true,
              type_id: "6195c21bcb7314dccdfb4dbb",
              user_id: "6193160d0a24a8698f655630",
              createTime: "2021-11-18T02:55:19.495Z",
              __v: 0,
            },
            {
              _id: "6195c514cb7314dccdfb4e1c",
              url_name: "知乎",
              url_address: "https://www.zhihu.com/",
              url_icon: "https://www.zhihu.com//favicon.ico",
              url_order: 0,
              url_status: true,
              type_id: "6195c21bcb7314dccdfb4dbb",
              user_id: "6193160d0a24a8698f655630",
              createTime: "2021-11-18T02:55:19.495Z",
              __v: 0,
            },
          ],
        },
        {
          _id: "6195c304cb7314dccdfb4dd1",
          type_name: "购物",
          type_order: "",
          user_id: "6193160d0a24a8698f655630",
          createTime: "2021-11-18T02:55:19.503Z",
          __v: 0,
          headers: [
            {
              _id: "6195c422cb7314dccdfb4dfe",
              url_name: "京东",
              url_address: "https://www.jd.com/",
              url_icon: "https://www.jd.com//favicon.ico",
              url_order: 0,
              url_status: true,
              type_id: "6195c304cb7314dccdfb4dd1",
              user_id: "6193160d0a24a8698f655630",
              createTime: "2021-11-18T02:55:19.495Z",
              __v: 0,
            },
            {
              _id: "6195c42fcb7314dccdfb4e01",
              url_name: "淘宝",
              url_address: "http://www.taobao.com",
              url_icon: "http://www.taobao.com/favicon.ico",
              url_order: 0,
              url_status: true,
              type_id: "6195c304cb7314dccdfb4dd1",
              user_id: "6193160d0a24a8698f655630",
              createTime: "2021-11-18T02:55:19.495Z",
              __v: 0,
            },
          ],
        },
        {
          _id: "6195c30ecb7314dccdfb4dd4",
          type_name: "吃饭",
          type_order: "",
          user_id: "6193160d0a24a8698f655630",
          createTime: "2021-11-18T02:55:19.503Z",
          __v: 0,
          headers: [
            {
              _id: "6195c4adcb7314dccdfb4e0f",
              url_name: "美团",
              url_address: "https://xm.meituan.com/",
              url_icon: "https://xm.meituan.com//favicon.ico",
              url_order: 0,
              url_status: true,
              type_id: "6195c30ecb7314dccdfb4dd4",
              user_id: "6193160d0a24a8698f655630",
              createTime: "2021-11-18T02:55:19.495Z",
              __v: 0,
            },
            {
              _id: "6195c4c6cb7314dccdfb4e12",
              url_name: "饿了么",
              url_address: "https://www.ele.me/",
              url_icon: "https://www.ele.me//favicon.ico",
              url_order: 0,
              url_status: true,
              type_id: "6195c30ecb7314dccdfb4dd4",
              user_id: "6193160d0a24a8698f655630",
              createTime: "2021-11-18T02:55:19.495Z",
              __v: 0,
            },
          ],
        },
        {
          _id: "6195c5dacb7314dccdfb4e2c",
          type_name: "娱乐",
          type_order: "",
          user_id: "6193160d0a24a8698f655630",
          createTime: "2021-11-18T02:55:19.503Z",
          __v: 0,
          headers: [
            {
              _id: "6195c5edcb7314dccdfb4e34",
              url_name: "腾讯视频",
              url_address: "https://v.qq.com/",
              url_icon: "https://v.qq.com//favicon.ico",
              url_order: 0,
              url_status: true,
              type_id: "6195c5dacb7314dccdfb4e2c",
              user_id: "6193160d0a24a8698f655630",
              createTime: "2021-11-18T02:55:19.495Z",
              __v: 0,
            },
            {
              _id: "6195c610cb7314dccdfb4e37",
              url_name: "快手",
              url_address: "https://www.kuaishou.com/",
              url_icon: "https://www.kuaishou.com//favicon.ico",
              url_order: 0,
              url_status: true,
              type_id: "6195c5dacb7314dccdfb4e2c",
              user_id: "6193160d0a24a8698f655630",
              createTime: "2021-11-18T02:55:19.495Z",
              __v: 0,
            },
            {
              _id: "6195c68bcb7314dccdfb4e3a",
              url_name: "爱奇艺",
              url_address: "https://www.iqiyi.com/",
              url_icon: "https://www.iqiyi.com//favicon.ico",
              url_order: 0,
              url_status: true,
              type_id: "6195c5dacb7314dccdfb4e2c",
              user_id: "6193160d0a24a8698f655630",
              createTime: "2021-11-18T02:55:19.495Z",
              __v: 0,
            },
            {
              _id: "6195c6a0cb7314dccdfb4e3d",
              url_name: "斗鱼",
              url_address: "https://www.douyu.com/",
              url_icon: "https://www.douyu.com//favicon.ico",
              url_order: 0,
              url_status: true,
              type_id: "6195c5dacb7314dccdfb4e2c",
              user_id: "6193160d0a24a8698f655630",
              createTime: "2021-11-18T02:55:19.495Z",
              __v: 0,
            },
            {
              _id: "6195c6b1cb7314dccdfb4e40",
              url_name: "虎牙",
              url_address: "https://www.huya.com/",
              url_icon: "https://www.huya.com//favicon.ico",
              url_order: 0,
              url_status: true,
              type_id: "6195c5dacb7314dccdfb4e2c",
              user_id: "6193160d0a24a8698f655630",
              createTime: "2021-11-18T02:55:19.495Z",
              __v: 0,
            },
            {
              _id: "6195c998cb7314dccdfb4e4f",
              url_name: "哔哩",
              url_address: "https://www.bilibili.com/",
              url_icon: "https://www.bilibili.com//favicon.ico",
              url_order: 0,
              url_status: true,
              type_id: "6195c5dacb7314dccdfb4e2c",
              user_id: "6193160d0a24a8698f655630",
              createTime: "2021-11-18T02:55:19.495Z",
              __v: 0,
            },
            {
              _id: "6195c9b5cb7314dccdfb4e52",
              url_name: "搜狐视频",
              url_address: "https://tv.sohu.com/",
              url_icon: "https://tv.sohu.com//favicon.ico",
              url_order: 0,
              url_status: true,
              type_id: "6195c5dacb7314dccdfb4e2c",
              user_id: "6193160d0a24a8698f655630",
              createTime: "2021-11-18T02:55:19.495Z",
              __v: 0,
            },
            {
              _id: "6195c9cacb7314dccdfb4e55",
              url_name: "芒果",
              url_address: "https://www.mgtv.com/",
              url_icon: "https://www.mgtv.com//favicon.ico",
              url_order: 0,
              url_status: true,
              type_id: "6195c5dacb7314dccdfb4e2c",
              user_id: "6193160d0a24a8698f655630",
              createTime: "2021-11-18T02:55:19.495Z",
              __v: 0,
            },
            {
              _id: "6195c9fbcb7314dccdfb4e5e",
              url_name: "56",
              url_address: "https://www.56.com/",
              url_icon: "https://www.56.com//favicon.ico",
              url_order: 0,
              url_status: true,
              type_id: "6195c5dacb7314dccdfb4e2c",
              user_id: "6193160d0a24a8698f655630",
              createTime: "2021-11-18T02:55:19.495Z",
              __v: 0,
            },
            {
              _id: "6195ca1ccb7314dccdfb4e61",
              url_name: "百度视频",
              url_address: "http://v.baidu.com/",
              url_icon: "http://v.baidu.com//favicon.ico",
              url_order: 0,
              url_status: true,
              type_id: "6195c5dacb7314dccdfb4e2c",
              user_id: "6193160d0a24a8698f655630",
              createTime: "2021-11-18T02:55:19.495Z",
              __v: 0,
            },
            {
              _id: "6195ca4ecb7314dccdfb4e64",
              url_name: "知网",
              url_address: "https://www.cnki.net/",
              url_icon: "https://www.cnki.net//favicon.ico",
              url_order: 0,
              url_status: true,
              type_id: "6195c5dacb7314dccdfb4e2c",
              user_id: "6193160d0a24a8698f655630",
              createTime: "2021-11-18T02:55:19.495Z",
              __v: 0,
            },
          ],
        },
        {
          _id: "6195c6e0cb7314dccdfb4e43",
          type_name: "新闻",
          type_order: "",
          user_id: "6193160d0a24a8698f655630",
          createTime: "2021-11-18T02:55:19.503Z",
          __v: 0,
          headers: [
            {
              _id: "6195c6f6cb7314dccdfb4e46",
              url_name: "网易新闻",
              url_address: "https://news.163.com/",
              url_icon: "https://news.163.com//favicon.ico",
              url_order: 0,
              url_status: true,
              type_id: "6195c6e0cb7314dccdfb4e43",
              user_id: "6193160d0a24a8698f655630",
              createTime: "2021-11-18T02:55:19.495Z",
              __v: 0,
            },
            {
              _id: "6195c70acb7314dccdfb4e49",
              url_name: "腾讯新闻",
              url_address: "https://news.qq.com/",
              url_icon: "https://news.qq.com//favicon.ico",
              url_order: 0,
              url_status: true,
              type_id: "6195c6e0cb7314dccdfb4e43",
              user_id: "6193160d0a24a8698f655630",
              createTime: "2021-11-18T02:55:19.495Z",
              __v: 0,
            },
          ],
        },
      ],
      dragIndex: "",
      enterIndex: "",
      group: { name: "header", pull: true, put: true },
    };
  },
  created() {},
  methods: {},
};
</script>

<style scoped lang="less">
.draggle {
  width: 800px;
  .dragg-type {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
  }
}
.ul-container {
  list-style: none;
  display: flex !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
  width: 200px;
  height: 200px;
  margin: 10px 10px;
  padding: 0px !important;
  background-color: bisque;

  .dragg-header {
    display: flex !important;
    flex-wrap: wrap !important;
    flex-direction: row !important;
  }
  .li-container {
    width: 40px;
    height: 40px;
    margin: 10px 0 0 10px;
    font-size: 10px;
    color: white;
    background-color: blue;
  }
}
</style>
